<template>
  <div id="app">
    <div class="header-box">
      <img src="@/assets/img/head-bg.png" class="head-bg" alt="" />
      <div class="head-title">智慧储运管理平台</div>

      <div class="left-date">
        <div class="year">{{ curDate }}&nbsp; {{ week }}</div>
      </div>

      <div class="screen-btn" @click="fullScreenClick">
        <img
          class="img"
          v-if="!fullscreen"
          src="@/assets/img/layout/fullscreen.png"
          alt=""
        />
        <img
          class="img"
          v-else
          src="@/assets/img/layout/exitfullscreen.png"
          alt=""
        />
      </div>
    </div>

    <div class="main-box">
      <card-item1 class="guan" title="油罐信息"></card-item1>
      <card-item2 title="当前库存量统计"></card-item2>
      <card-item3 title="储量占比分析"></card-item3>
      <card-item4 title="实时收发油信息"></card-item4>
      <card-item5 title="月度收发油信息"></card-item5>
      <card-item6 title="日收发油趋势"></card-item6>
    </div>
    <!-- <div class="content-box">
      <div class="content-left">
        <ContentLeft ref="contentLeft"></ContentLeft>
      </div>
      <div class="content-right">
        <ContentRight></ContentRight>
      </div>
    </div> -->
  </div>
</template>

<script>
// import ContentLeft from '@/components/ContentLeft'
// import ContentRight from '@/components/ContentRight'
import CardItem1 from '@/components/CardItem1'
import CardItem2 from '@/components/CardItem2'
import CardItem3 from '@/components/CardItem3'
import CardItem4 from '@/components/CardItem4'
import CardItem5 from '@/components/CardItem5'
import CardItem6 from '@/components/CardItem6'
export default {
  name: 'App',
  data () {
    return {
      curDateTimer: null,
      curDate: '',
      week: '',
      fullscreen: false
    }
  },
  components: {
    CardItem1,
    CardItem2,
    CardItem3,
    CardItem4,
    CardItem5,
    CardItem6
    // ContentLeft,
    // ContentRight
  },
  computed: {
  },
  watch: {
  },
  created () {
    this.curDateTimer = setInterval(() => {
      this.curDate = this.$dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
      // this.week = this.getWeek(this.$dayjs(new Date()).format('d'))
      // 在main.js引入了dayjs中文包，直接format dddd即可
      this.week = this.$dayjs().format('dddd')
    }, 1000)
  },
  beforeDestroy () {
    window.clearInterval(this.curDateTimer)
  },
  mounted () {
    window.addEventListener('resize', () => {
      // this.$nextTick(() => {
      //   this.$refs.contentLeft.changeResize()
      // })
      if (this.timer) return

      this.timer = setTimeout(() => {
        // 如果是按 "Esc" 键退出全屏，窗口状态已经是非全屏，但是之前记录的状态还是全屏的状态

        if (!this.checkFull() && this.fullScreen) {
          // 退出全屏状态。。。

          this.fullScreen = false

          this.windowExitFullScreen()
        } else {
          // 进入全屏状态。。。
        }

        clearTimeout(this.timer)

        this.timer = null
      }, 0)
    })
  },
  methods: {

    getWeek (num) {
      const obj = {
        0: '星期日',
        1: '星期一',
        2: '星期二',
        3: '星期三',
        4: '星期四',
        5: '星期五',
        6: '星期六'
      }
      return obj[num] ? obj[num] : ''
    },

    fullScreenClick () {
      this.fullScreen = !this.fullScreen
      console.log('this.fullScreen: ', this.fullScreen)

      if (this.fullScreen) {
        // 当前要启动全屏

        this.setWindowFullScreen()
      } else {
        // 当前要退出全屏

        this.windowExitFullScreen()
      }
    },

    // 启动全屏

    setWindowFullScreen () {
      const docElm = document.getElementById('app')

      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen()
      } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen()
      } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen()
      }
      this.fullscreen = true
    },

    // 退出全屏

    // windowExitFullScreen () {
    //   if (document.exitFullscreen) {
    //     document.exitFullscreen()
    //   } else if (document.msExitFullscreen) {
    //     document.msExitFullscreen()
    //   } else if (document.mozCancelFullScreen) {
    //     document.mozCancelFullScreen()
    //   } else if (document.webkitCancelFullScreen) {
    //     document.webkitCancelFullScreen()
    //   }
    //   this.fullscreen = false

    //   // this.changeResize()
    //   this.$nextTick(() => {
    //     this.$refs.contentLeft.changeResize()
    //   })
    // },
    windowExitFullScreen () {
      if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
            .then(() => {
              this.fullscreen = false
              this.$nextTick(() => {
                this.$refs.contentLeft.changeResize()
              })
            })
            .catch(error => {
              console.error('Failed to exit fullscreen:', error)
            })
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
          this.fullscreen = false
          this.$nextTick(() => {
            this.$refs.contentLeft.changeResize()
          })
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
          this.fullscreen = false
          this.$nextTick(() => {
            this.$refs.contentLeft.changeResize()
          })
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
          this.fullscreen = false
          this.$nextTick(() => {
            this.$refs.contentLeft.changeResize()
          })
        }
      } else {
        // Handle case where document is not in fullscreen
        this.fullscreen = false
        this.$nextTick(() => {
          this.$refs.contentLeft.changeResize()
        })
      }
    },

    // 判断浏览器是否处于全屏状态 (需要考虑兼容问题)

    checkFull () {
      // 火狐浏览器

      let isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled

      if (isFull === undefined) isFull = false

      return isFull
    }

  }
}
</script>

<style scoped lang="scss">
#app {
  width: 1920px;
  height: 1080px;
  min-width: 1920px;
  min-height: 1080px;
  background-color: #030811;
  .header-box {
    width: 100%;
    height: 90px;
    position: relative;
    flex-shrink: 0;
    animation: slide-up .7s ease forwards;
    @keyframes slide-up {
      from {
        transform: translateY(-100%); /* 从下边开始 */
        opacity: 0; /* 不透明度为0 */
      }
      to {
        transform: translateY(0); /* 移动到原位置 */
        opacity: 1; /* 完全不透明 */
      }
    }
    .head-bg {
      width: 100%;
      height: 140px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1;
    }
    .left-date {
      position: absolute;
      top: 20px;
      left: 14px;
      z-index: 5;
      color: #fff;
      font-size: 18px;
      font-family: DINCondensed-Bold;
    }
    .screen-btn {
      position: absolute;
      top: 0px;
      right: 14px;
      z-index: 5;
      cursor: pointer;
      .img {
        width: 120px;
        height: 60px;
      }
    }
    .head-title {
      font-size: 48px;
      color: #fff;
      text-align: center;
      letter-spacing: 2px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -42px);
      z-index: 3;
      font-family: YouSheBiaoTiHei;
    }
  }
  .main-box {
    padding: 10px;
    flex: 1;
    height: 990px;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    row-gap: 10px;
    column-gap: 10px;

    .guan {
      grid-column: 1 / span 2;
      grid-row: 1 / span 2;
    }
  }
  .content-box {
    width: 100%;
    height: 970px;
    display: flex;
    .content-left {
      height: 100%;
      flex: 1;
    }
    .content-right {
      width: 598px;
      flex-shrink: 0;
    }
  }
}
</style>
<style lang="scss" >

</style>
